<template>
	<view style="padding: 24rpx 20rpx;">
		<view class="box box-align-center">
			<view class="r-input box box-align-center" style="margin-right: 10rpx;padding: 0 20rpx;">
				<u-image width="18px" height="18px" src="https://www.wytldy.com/file/wxIMG/images/search.png"></u-image>
				<u-input v-model="value" class="ml5"></u-input>
			</view>
			<view class="filter box box-align-center box-pack-center" @click="handleFilter">
				<u-image width="19px" height="16px" src="https://www.wytldy.com/file/wxIMG/images/filter.png"></u-image>
				<text class="ml5">筛选</text>
			</view>
		</view>
		<view class="list mt20">
			<view class="item u-border-bottom mt15" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
				<view class="score">
					优秀
				</view>
				<view class="student-info box box-align-center">
					<u-avatar src="https://www.wytldy.com/file/wxIMG/images/avr.png"></u-avatar>
					<view class="ml10">
						<view class="box box-align-center">
							<text style="color: #404148;font-size: 26rpx;">王晓晓</text>
							<view class="zy ml10">
								新闻传播专业
							</view>
						</view>
						<text style="color: #5F6572;font-size: 22rpx;margin-top: 3px;">2021年6月15日 18:00</text>
					</view>
				</view>
				<view class="content box box-align-center box-pack-between">
					<view class="">
						<text style="color: #292A2E;font-size: 30rpx;font-weight: bold;">鸡蛋黄瓜捞面</text>
						<view class="" style="font-size: 24rpx;color: #5F6572;">
							1.材料准备好：干挂面、鸡蛋、黄瓜。 2.先烧水，与此同时处理食材：黄瓜切薄片， 大蒜切末。
						</view>
					</view>
					<u-image width="120rpx" height="120rpx" src="https://www.wytldy.com/file/wxIMG/images/avr.png">
					</u-image>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<scroll-view scroll-y="true" style="height: 800rpx;">
				<view>
					<view class="mt20" style="padding: 40rpx;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">学校</text>
							<view class="box box-align-center" @click="showMoreSchool = !showMoreSchool">
								<text class="mr5 more">{{showMoreSchool?`收起`:`更多`}}</text>
								<u-icon :name="showMoreSchool?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center"
							:style="{display:showMoreSchool == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in schoolList" :key="index"
								:class="{active:item.id == activeValue}" @click="selectSchool(item)">
								{{item.name}}
								<view class="act"></view>
							</view>
						</view>
					</view>
					<view style="padding: 40rpx;border-top:1px solid #E9EDF5;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">专业</text>
							<view class="box box-align-center" @click="showMoreZy = !showMoreZy">
								<text class="mr5 more">{{showMoreZy?`收起`:`更多`}}</text>
								<u-icon :name="showMoreZy?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center" :style="{display:showMoreZy == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in schoolList" :key="index"
								:class="{active:item.id == activeValue}" @click="selectSchool(item)">
								{{item.name}}
								<view class="act"></view>
							</view>
						</view>
					</view>
					<view style="padding: 40rpx;border-top:1px solid #E9EDF5;">
						<view class="box box-align-center box-pack-between">
							<text class="tip">班级</text>
							<view class="box box-align-center" @click="showMoreClass = !showMoreClass">
								<text class="mr5 more">{{showMoreClass?`收起`:`更多`}}</text>
								<u-icon :name="showMoreClass?`arrow-up`:`arrow-down`"></u-icon>
							</view>
						</view>
						<view class="wrap box box-align-center"
							:style="{display:showMoreClass == true ? 'flex' : 'none'}">
							<view class="school-list" v-for="(item,index) in schoolList" :key="index"
								:class="{active:item.id == activeValue}" @click="selectSchool(item)">
								{{item.name}}
								<view class="act"></view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="confrim-btn box box-align-center box-pack-around">
				<u-button :custom-style="customStyleReset" @click="reset">重置</u-button>
				<u-button :custom-style="customStyle" @click="comfirm">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		makeCanvas
	} from "../common/canvas.js";
	export default {
		data() {
			return {
				value: "",
				status: 'loadmore',
				list: 15,
				page: 0,
				show: false,
				schoolList: [{
						id: 1,
						name: "北京工业大学"
					},
					{
						id: 2,
						name: "北京工业大学1"
					},
					{
						id: 3,
						name: "北京工业大学北京工业大学1"
					}
				],
				activeValue: 1,
				showMoreSchool: true,
				showMoreZy: false,
				showMoreClass: false,
				customStyleReset: {
					width: '222rpx',
				},
				customStyle: {
					width: '450rpx',
					backgroundColor: "#626BF1",
					color: "#fff"
				}
			}
		},
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.list += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		onShareAppMessage(res) {
			return {
				title: "劳动成果展示",
				path: '/team/LaborAchievements',
				imageUrl: "https://www.wytldy.com/file/wxIMG/images/ld.jpeg",
			}
		},
		methods: {
			//筛选
			handleFilter() {
				console.log(this.value);
				this.show = true
			},
			changeSchool() {

			},
			goDetail(item) {
				uni.navigateTo({
					url: '/team/LaborDetail'
				})
			},
			//选中学校
			selectSchool(item) {
				this.activeValue = item.id
			},
			//确定
			comfirm() {

			},
			reset() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.r-input {
		width: 540rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx 0rpx 0rpx 38rpx;
	}

	.filter {
		width: 163rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 0rpx 38rpx 38rpx 0rpx;
	}

	.list {}

	.item {
		position: relative;
		padding: 22rpx 38rpx 55rpx 38rpx;
		height: 330rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 23rpx 46rpx 0rpx rgba(205, 207, 230, 0.18);
		border-radius: 20rpx;
	}

	.zy {
		padding: 0 5px;
		width: auto;
		height: 36rpx;
		line-height: 36rpx;
		background: #F0F1F8;
		border-radius: 18rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.score {
		position: absolute;
		top: 0;
		right: 0;
		width: 91rpx;
		height: 53rpx;
		line-height: 53rpx;
		background: #FFF9EC;
		border-radius: 0rpx 20rpx 0rpx 12rpx;
		color: #FF943B;
		font-size: 26rpx;
		text-align: center;
	}

	.tip {
		font-size: 33rpx;
		font-weight: bold;
		color: #000000;
	}

	.more {
		color: #A6AAB7;
		font-size: 26rpx;
	}

	.wrap {
		flex-wrap: wrap;
	}

	.school-list {
		position: relative;
		padding: 0 40rpx;
		margin-right: 28rpx;
		margin-top: 24rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #F8F9FD;
		border-radius: 14rpx;
		text-align: center;
		color: #5F6572;
		font-size: 28rpx;

		.act {
			display: none;
			position: absolute;
			bottom: 0;
			right: 0;
			width: 25px;
			height: 22px;
		}

		&.active {
			color: #3440FF;
			background: #E4EDFC;
		}

		&.active .act {
			display: block;
			background: url(https://www.wytldy.com/file/wxIMG/images/active.png) repeat center;
		}
	}

	.confrim-btn {
		padding-bottom: 40rpx;
	}
</style>
